<template>
    <div class="app-container">
        <el-card shadow="always" style="width: 50%;margin-top: 5px;height:100%">
            <div class="chart-box target-change">
                <div class="box-title">近期能力创建</div>
                <div class="chart" id="leftChart"></div>
            </div>
        </el-card>
        <div style="display: flex;flex-wrap: wrap;width: 50%;margin-left: 5px;">
            <el-card style="width: 100%;" shadow="always">
                <div class="rightTop chart-box1">
                    <div class="box-title" style="margin-top: 70px;">能力类型分布</div>
                    <div class="chart" id="rightTopChart"></div>
                </div>
            </el-card>
            <el-card style="width: 100%;margin-top: 5px;" shadow="always">
                <div class="rightBottom chart-box1">
                    <div class="box-title" style="margin-top: 40px;">近期</div>
                    <div class="chart" id="rightBottomChart"></div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getcreate} from "@/api/statistics/statistics";

export default {
    name: 'CapCreate',
    data() {
        return {
            leftChart: null,
            rightTopChart: null,
            rightBottomChart: null,
           leftChartData: [],
            rightTopChartData: [],
            rightBottomChartData: [],
        }
    },
    mounted() {
      getcreate().then(res => {
        this.leftChartData = res.data.erlist
        this.rightTopChartData = res.data.typelist
        this.rightBottomChartData=(res.data.erlist.slice(6, 13))

        this.getleftChart( this.leftChartData),

          this.getrightTopChart( this.rightTopChartData)
        console.log(this.rightTopChartData)
         this.getrightBottomChart(this.rightBottomChartData)

      })


    },
    methods: {
      renderTime(date) {
        // 将传入的日期字符串或日期对象转换为 Date 对象
        const dateObj = new Date(date);

        // 使用 padStart 方法确保月份和日期始终为两位数
        const year = dateObj.getFullYear();
        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
        const day = dateObj.getDate().toString().padStart(2, '0');

        // 返回格式化的年月日字符串
        return `${year}-${month}-${day}`;
      }
      ,
        getleftChart(data) {
            let datax = []
            let ins = []
            let outs = []
            data.forEach((item, index) => {
                datax.push(this.renderTime(item.time))
                // ins.push(item.ins)
                outs.push(item.outs)
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: 0,
                    right: 20,
                    bottom: 22,
                    top: 50,
                    containLabel: true
                },
                legend: {
                    data: ['rec'],
                    right: 10,
                    top: 12,
                    textStyle: {
                        color: "#000"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: {
                    type: 'category',
                    data: datax,
                    axisLabel: {
                        margin: 10,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontWeight: 400,
                        fontSize: 14,
                    },
                    axisTick: {//坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {//坐标轴轴线相关设置
                        lineStyle: {
                            color: '#E5E9ED',
                            // opacity:0.2
                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#E5E9ED',
                            // 	opacity:0.1
                        }
                    }
                },
                yAxis: {
                    minInterval: 1, //不允许出现小数位
                    axisTick: { show: false },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(120, 203, 255, .2)'
                        }
                    },
                    splitArea: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        margin: 5,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                    }
                },
                series: [
                    {
                        name: 'rec',
                        type: 'line',
                        barWidth: '15%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                            borderRadius: 11,
                        },
                        data: ins,
                        stack: 'x',
                        areaStyle: {},
                    },
                    {
                        name: 'rec',
                        type: 'line',
                        barWidth: '15%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            borderRadius: 11,
                        },
                        data: outs,
                        areaStyle: {}
                    }]
            };
            this.leftChart = this.getEchartsInstance('leftChart')

            this.leftChart.setOption(option, true)
        },
        getrightTopChart(data) {
            let dataList = []

            data.forEach((item, index) => {
              let warnLabel = item.warnLabel === 'type4' ? '认证接口' :
                item.warnLabel === 'type1' ? '查询接口' :
                  item.warnLabel === 'type2' ? '信息接口' :
                    '写入接口';

              dataList.push({
                    name: warnLabel,
                    value: item.total
                })
            })
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                title: {
                    bottom: 10,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    label: {
                        fontSize: 14,
                        color: '#000',
                        formatter: '{b} {d}%',
                    },
                    data: dataList,
                }]
            };
            this.getrightTopChart = this.getEchartsInstance('rightTopChart')
            this.getrightTopChart.setOption(option, true)
        },
        getrightBottomChart(data) {
            let datax = []
            let ins = []
            let outs = []
            data.forEach((item, index) => {
              datax.push(this.renderTime(item.time))
                outs.push(item.outs)
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: 0,
                    right: 20,
                    bottom: 22,
                    top: 50,
                    containLabel: true
                },
                legend: {
                    data: ['create'],
                    right: 10,
                    top: 12,
                    textStyle: {
                        color: "#000"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: {
                    type: 'category',
                    data: datax,
                    axisLabel: {
                        margin: 10,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontWeight: 400,
                        fontSize: 14,
                    },
                    axisTick: {//坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {//坐标轴轴线相关设置
                        lineStyle: {
                            color: '#E5E9ED',
                            // opacity:0.2
                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#E5E9ED',
                            // 	opacity:0.1
                        }
                    }
                },
                yAxis: {
                    minInterval: 1, //不允许出现小数位
                    axisTick: { show: false },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(120, 203, 255, .2)'
                        }
                    },
                    splitArea: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        margin: 5,
                        color: 'rgba(24, 29, 25, 1)',
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                    }
                },
                series: [
                    {
                        name: 'create',
                        type: 'line',
                        barWidth: '15%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            borderRadius: 11,
                        },
                        data: outs,
                        areaStyle: {}
                    }]
            };
            this.rightBottomChart = this.getEchartsInstance('rightBottomChart')
            this.rightBottomChart.setOption(option, true)
        },
        // echarts获取实例 画图
        getEchartsInstance(id) {
            let chart = echarts.getInstanceByDom(document.getElementById(id))
            if (chart === undefined) {
                chart = echarts.init(document.getElementById(id), null, { renderer: 'svg' })
            }
            return chart
        }
    },
    watch: {
        // 监听左侧菜单收缩 调整echarts图表大小
        "$store.state.app.sidebar": {
            deep: true,
            handler: function (newVal, oldVal) {
                setTimeout(() => { // 因为elementUI的侧边栏收缩展开的延时时间是300
                    this.leftChart.resize()
                    this.rightTopChart.resize()
                    this.rightBottomChart.resize()
                }, 300)
            }
        },
    },
}
</script>

<style scoped lang="scss">
.app-container {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 20 5px;
    .el-card {
        .chart-box {
            width: 100%;
            height: 80vh;
            margin-top: -15px;
            position: relative;

            .box-title {
                height: 37px;
                width: 90%;
                margin: 0 auto;
                font-size: 23px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #00C0FF;
                text-align: center;
                line-height: 33px;
            }


            .chart {
                width: 96%;
                height: 80vh;
                position: absolute;
                left: -60%;
                right: -60%;
                margin: 0 auto;
            }


        }
        .chart-box1 {
            width: 100%;
            height: 36vh;
            margin-top: -55px;
            position: relative;

            .box-title {
                height: 37px;
                width: 90%;
                margin: 0 auto;
                font-size: 23px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #00C0FF;
                text-align: center;
                line-height: 33px;
            }

            .chart {
                width: 96%;
                height: calc(100% - 37px);
                position: absolute;
                left: -60%;
                right: -60%;
                margin: 0 auto;
            }


        }
    }
}
</style>
